<template lang="">
  <div>
    <h1>Roles</h1>
    <el-table :data="roleList" trippe border>
      
      <el-table-column type="expand" label="">
        <template slot-scope="scope">
          <el-row  v-for="(item1,index1) in scope.row.children" :key="item1.id"  :class="[index1==0?'':'lineTop','vcenter']">
            <!-- 一级权限 -->
            <el-col :span="5" ><el-tag type="danger" closable @close="deleteRight(scope.row,item1.id)">{{item1.authName}}</el-tag> </el-col>
            <!-- 二级和三级权限 -->
            <el-col :span="19">
              <el-row  :class="[index2==0?'':'lineTop','vcenter']" v-for="(item2,index2) in item1.children" :key="item2.id">
                <el-col :span="8"><el-tag type="warning" closable @close="deleteRight(scope.row,item2.id)">{{item2.authName}}</el-tag></el-col>
                <el-col :span="16">
                  <el-tag  v-for="item3 in item2.children" :key="item3.id" type="success" closable @close="deleteRight(scope.row,item3.id)">
                    {{item3.authName}}
                  </el-tag> </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column type="index" label="#"></el-table-column>
      <el-table-column prop="roleName" label="角色名称"></el-table-column>
      <el-table-column prop="roleDesc" label="角色描述"></el-table-column>
      <el-table-column label="编辑">
        <template slot-scope="scope">
          <el-button type="primary"  icon="el-icon-edit" size="small">编辑</el-button>
          <el-button type="danger"  icon="el-icon-delete" size="small">删除</el-button>
          <el-button type="warning"  icon="el-icon-setting" size="small" @click="showRightsDialog(scope.row)">分配权限</el-button>
        </template>
       
      </el-table-column>
    </el-table>

    <!-- 分配权限弹框 -->
    <el-dialog
      title="分配权限"
      :visible.sync="rightDialogVisible"
      @close="rightDialogClose"
      width="50%">

      <el-tree
        :data="rightList"
        :props="treeProps"
        ref="treeRef"
        show-checkbox
        node-key="id"
        :default-expand-all="true"
        :default-checked-keys="defKeys">
      </el-tree>

      <span slot="footer" class="dialog-footer">
        <el-button @click="rightDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="setRight">确 定</el-button>
      </span>
    </el-dialog>


    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "Roles",
  data() {
    return {
      roleList: [],
      //权限相关
      rightList: [],
      rightDialogVisible: false,   //分配权限弹框
      treeProps: {
        label: 'authName',
        children: 'children'
      },
      defKeys: [],
      role: {}

    }
  },
  async created() {
    this.getRoleList()
  },
  methods: {
    async getRoleList() {
      let { data: res } = await this.$axios({ url: "roles" }).catch(err => err)
      if (res.meta.status !== 200) return this.$message.error("数据获取错误")
      this.roleList = res.data
    },

    //关闭分配权限对话框
    rightDialogClose() {
      this.defKeys = []
    },
    //显示分配权限的对话框
    async showRightsDialog(role) {
      this.role = role;

      //获取选中的权限id
      this.getKeys(role, this.defKeys)

      let { data: res } = await this.$axios({ url: `rights/tree` }).catch(err => err)
      if (res.meta.status !== 200) return this.$message.error("权限列表请求错误")
      this.rightList = res.data;

      this.rightDialogVisible = true;
    },
    getKeys(role, arr = []) {
      if (!role.children) {
        arr.push(role.id)
      } else {
        role.children.forEach(item => {
          this.getKeys(item, arr)
        })
      }

    },
    //角色授权
    async setRight() {
      let halfCheckedKeys = this.$refs.treeRef.getHalfCheckedKeys()
      let checkedKeys = this.$refs.treeRef.getCheckedKeys()

      let arr = [
        ...halfCheckedKeys,
        ...checkedKeys
      ]

      let { data: res } = await this.$axios({
        url: `roles/${this.role.id}/rights`,
        method: "POST",
        data: {
          roleId: this.roleId,
          rids: arr.join(",")
        }
      }).catch(err => err)

      if (res.meta.status !== 200) return this.$message.error("更新权限失败")
      this.$message.success("成功更新权限")
      this.rightDialogVisible = false;
      this.getRoleList()
    },
    //删除权限
    async deleteRight(role, rightId) {
      let result = await this.$confirm("您确定要取消此权限吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: 'warning'
      }).catch(err => err)

      if (result === 'confirm') {
        let { data: res } = await this.$axios({ url: `roles/${role.id}/rights/${rightId}`, method: "DELETE" }).catch(err => err)
        if (res.meta.status !== 200) return this.$message.error("取消权限失败")
        // this.roleList = res.data

        role.children = res.data

        this.$message.success("成功取消权限")
      }

    }
  }

}
</script>
<style lang="less">
.el-tag {
  margin: 7px;
}

.lineTop {
  border-top: 1px solid #ccc;
}

.vcenter {
  display: flex;
  align-items: center;
}
</style>